<template>
	<view>
		<map class="core-map" :latitude="centerPoint.latitude" :longitude="centerPoint.longitude" :markers="stdMarkers" :scale="16" @click="any"></map>
		<view>xxx:{{ stores }}</view>
		<button @click="choose">选择位置</button>
		<button @click="self">获取自身位置</button>
	</view>
</template>
<script>
export default {
	data() {
		return {
			centerPoint: {
				latitude: 36,
				longitude: 120
			},
			stores: []
		};
	},
	computed: {
		stdMarkers() {
			return this.stores.map((e, i) => {
				return {
					...e,
					id: i,
					title: e.storeName,
					iconPath: '/static/product2.png',
					width: 30,
					height: 30
				};
			});
		}
	},
	methods: {
		any(e) {
			console.log(e.detail);
		},
		//  POI  point of interest
		async choose() {
			const res = await uni.chooseLocation({});
			console.log(res);
			if (res.name) {
				this.stores.push({
					latitude: res.latitude,
					longitude: res.longitude,
					storeName: res.name
				});
			}
		},
		async self() {
			const res = await uni.getLocation({});
			console.log(res);
			this.stores.push({
				latitude: res.latitude,
				longitude: res.longitude,
				storeName: 'self'
			});
		}
	}
};
</script>
<style>
.core-map {
	width: 100%;
	height: 80vh;
}
</style>
